<template>
	<view>
		<view class="content">
			<view class="u-tabs-box tab-wrapper">
				<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750" bg-color="transparent"></u-tabs-swiper>
				<view class="search f-c-c">
					<view class="f-c-sb boxShadow con">
            <u-search v-model="goodsServerName" :shape="'square'" :show-action="false" height="72"
                      placeholder="请输入商品/服务名称" style="width: 100%;" @change="searchChange"></u-search>
            <!-- 									<input type="text" value="" v-model="goodsServerName" placeholder="请输入商品/服务名称" />
                    <u-icon name="search" color="#333333" size="36"></u-icon> -->
          </view>
					<view class="filtrate boxShadow" @click="show = true">
						筛选
						<u-icon name="arrow-down" color="#FFF" size="26"></u-icon>
					</view>
				</view>
			</view>

			<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(items, indexs) in shopList" :key="indexs">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<u-empty v-if="!items.list.length" mode="order"></u-empty>
						<block v-for="(item, index) in items.list" :key="index">
							<view class="item fromBox boxShadow">
								<view class="f-c-sb title">
									<view>状态</view>
									<view>{{ current == 0 ? '已上架' : current == 1 ? '已下架' : current == 2 ? '已删除' : '' }}</view>
								</view>
								<view class="f-c-fs itemLits">
									<view class="label">展示区域：</view>
									<view class="value">{{ item.showAreaStr }}</view>
								</view>
								<view class="f-c-fs itemLits" v-if="item.showArea == 1">
									<view class="label">商品类型：</view>
									<view class="value">{{ item.goodsTypeStr }}</view>
								</view>
								<view class="f-c-fs itemLits" v-if="item.showArea == 2">
									<view class="label">服务类型：</view>
									<view class="value">{{ item.serverTypeStr }}</view>
								</view>
								<view class="f-c-fs itemLits">
									<view class="label">商品名称：</view>
									<view class="value">{{ item.goodsServerName }}</view>
								</view>
								<view class="f-c-fs  itemLits">
									<view class="f-c-fs">
										<view class="label">原价：</view>
										<view class="value">{{ item.costPrice }}</view>
									</view>
									<view class="f-c-fs">
										<view class="label">现价：</view>
										<view class="value">{{ item.nowPrice }}</view>
									</view>
								</view>
								<view class="f-c-fs  itemLits red">
									<view class="f-c-fs">
										<view class="label">库存：</view>
										<view class="value">{{ item.stockNumber }}</view>
									</view>
									<view class="f-c-fs">
										<view class="label">剩余库存：</view>
										<view class="value">{{ item.surplusNumber }}</view>
									</view>
								</view>
								<view class="btn-wrapper f-c-sb">
									<view class="btn" @click="goData(item.gsId)">数据统计</view>
									<view class="f-c-fs operation">
                    <view @click="godetail(item.gsId)">详情</view>
                    <view class="line"></view>
                    <view v-if="current == 0" @click="goUpdate(item.gsId,1)">修改</view>
                    <view v-if="current == 1" @click="goUpdate(item.gsId,2)">复制</view>
                    <view v-if="current ==0" class="line"></view>
                    <view v-if="current == 0" @click="updataStatus(item.gsId, 2, 2)">下架</view>
                    <!-- <view v-if="current == 1" @click="updataStatus(item.gsId, 2, 1)">上架</view> -->
                    <!-- <view v-if="current!=3" class="line"></view>
                    <view v-if="current!=3" @click="updataStatus(item.gsId,2,2)">删除</view> -->
                  </view>
								</view>
								<!-- 								<view class="remark">
									<image src="https://sj.shopec.com.cn/image-server/26-说明.png" mode=""></image>
									说明：店铺正值双十一大促期间
								</view> -->
							</view>
						</block>
						<u-loadmore v-if="!items.listQuery.noData && items.list.length != 0" :status="'nomore'" :load-text="{ nomore: '没有更多数据了' }" />
					</scroll-view>
				</swiper-item>
			</swiper>
			<view class="creat" @tap="goadd">创建商品/服务</view>
			<u-popup mode="right" v-model="show" close-icon-pos="top-left" :closeable="true" border-radius="30" @open="open" @close="close">
				<view class="popupCon">
					<scroll-view scroll-y="true" style="height: auto;width: 100%;">
						<view>
							<u-radio-group wrap v-model="selectList[0].title">
								<view class="title">{{ selectList[0].name }}</view>
								<u-radio
									:size="50"
									@change="radioChange(item.value, selectList[0].type)"
									v-for="(item, index) in selectList[0].list"
									:key="item.name"
									:name="item.name"
									:disabled="item.disabled"
								>
									{{ item.name }}
								</u-radio>
							</u-radio-group>
						</view>
						<view v-if="searchObj.showArea == 1">
							<u-radio-group wrap v-model="selectList[1].title">
								<view class="title">{{ selectList[1].name }}</view>
								<u-radio
									:size="50"
									@change="radioChange(item.value, selectList[1].type)"
									v-for="(item, index) in selectList[1].list"
									:key="item.name"
									:name="item.name"
									:disabled="item.disabled"
								>
									{{ item.name }}
								</u-radio>
							</u-radio-group>
						</view>
						<view v-if="searchObj.showArea == 2">
							<u-radio-group wrap v-model="selectList[2].title">
								<view class="title">{{ selectList[2].name }}</view>
								<u-radio
									:size="50"
									@change="radioChange(item.value, selectList[2].type)"
									v-for="(item, index) in selectList[2].list"
									:key="item.name"
									:name="item.name"
									:disabled="item.disabled"
								>
									{{ item.name }}
								</u-radio>
							</u-radio-group>
						</view>
					</scroll-view>
					<view class="confrim-btn f-c-c"><u-button size="medium" @click="inquire()" type="success">搜索</u-button></view>
				</view>
			</u-popup>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
import {goodsserverList, goodsserverTabList, goodsserverUpdateStatus} from '@/api/index.js';
import {mapGetters} from 'vuex';

export default {
  data() {
    return {
      list: [
        {
          name: '已上架',
          value: '已上架',
          type: 'status'
        },
        {
          name: '已下架',
          value: '已下架',
          type: 'status'
        }
        // ,
        // {
        // 	name: '已删除',
        // 	value: '已删除',
        // 	type: 'delFlag'
				// }
			],
			selectList: [
				{
          name: '展示区域：',
          title: '全部',
          type: 'showArea',
          isShow: true,
          list: [
            {
              name: '商城',
              value: '1'
            },
            {
              name: '门店服务',
              value: '2'
						},
						{
							name: '全部',
							value: '3'
						}
					]
				},
        {
          name: '商品类型：',
          title: '全部',
          type: 'goodsType',
          isShow: false,
          list: [
            {
              name: '套餐',
              value: '60'
            },
            {
              name: '卡券',
              value: '61'
            },
            {
              name: '商品',
              value: '59'
            }
            ,
            {
              name: '全部',
              value: '0'
            }
          ]
				},
        {
          name: '服务类型：',
          title: '全部',
          type: 'serverType',
          isShow: false,
          list: [
            {
              name: '洗车',
              value: '1'
            },
            {
              name: '钣喷',
              value: '2'
            },
            {
              name: '保养',
              value: '3'
            }
            ,
            {
              name: '全部',
              value: '0'
            }
          ]
				}
			],
			// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
			current: 0, // tabs组件的current值，表示当前活动的tab选项
			swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			show: false,
			goodsServerName: '',
			searchObj: {
				showArea: 3
			},
			shopList: [
				{
					listQuery: {
						pageNo: 1,
						pageSize: 20,
						status: 1,
						delFlag: 1,
						noData: true
					},
					list: []
				},
				{
					listQuery: {
						pageNo: 1,
						pageSize: 20,
						status: 2,
						delFlag: 1,
						noData: true
					},
					list: []
				},
				{
					listQuery: {
						pageNo: 1,
						pageSize: 20,
						delFlag: 2,
						noData: true
					},
					list: []
				}
			]
		};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	onLoad() {},
	onShow() {
    if (this.$get('goodsserverSave') == 'update') {
      this.current = 0
      this.$remove('goodsserverSave')
      this.init()
    } else {
      this.init();

    }
  },
	onPullDownRefresh() {
		console.log('refresh');
		this.init();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		init() {
			this.shopList[this.current].listQuery.pageNo = 1;
			this.shopList[this.current].listQuery.noData = true;
			this.getlist();
			this.getTabList();
		},

    // tabs通知swiper切换
		tabsChange(index) {
			// this.current = index;
			this.swiperCurrent = index;
		},
		// swiper-item左右移动，通知tabs的滑块跟随移动
		transition(e) {
			let dx = e.detail.dx;
			this.$refs.uTabs.setDx(dx);
		},
		// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
		// swiper滑动结束，分别设置tabs和swiper的状态
		animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
      // this.getlist();
      if (this.shopList[current].list.length == 0 && this.shopList[current].listQuery.noData) {
        this.getlist();
      }
      // this.init()
    },
		// scroll-view到底部加载更多
		onreachBottom() {
			if (this.shopList[this.current].listQuery.noData) {
				uni.showLoading({});
				this.getlist();
			}
		},
		getlist() {
      this.shopList[this.current].listQuery.goodsServerName = this.goodsServerName;
      var data = {
        storeBasicId: this.userInfo.storeBasicId,
        goodsServerName: this.goodsServerName,
        ...this.shopList[this.current].listQuery
      };
      console.log('this.searchObj.showArea', this.searchObj.showArea)
      console.log(data)
      if (this.searchObj.showArea != 3) {
        data.showArea = this.searchObj.showArea
        if (this.searchObj.goodsType != 0) {
          data.goodsType = this.searchObj.goodsType
        }

        if (this.searchObj.serverType != 0) {
          data.serverType = this.searchObj.serverType
        }
      }

      goodsserverList(data).then(res => {
        console.log(res);
        if (this.shopList[this.current].listQuery.pageNo == 1) {
          this.shopList[this.current].list = res.data;
        } else {
          this.shopList[this.current].list = this.shopList[this.current].list.concat(res.data);
        }
        this.shopList[this.current].listQuery.pageNo += 1;
        if (this.shopList[this.current].listQuery.pageSize != res.data.length) {
					this.shopList[this.current].listQuery.noData = false;
				}
			});
		},
		getTabList() {
      var data = {
        storeBasicId: this.userInfo.storeBasicId,
        goodsServerName: this.goodsServerName,
        ...this.shopList[this.current].listQuery
      };
      delete data.pageSize;
      delete data.pageNo;
      delete data.noData;
      delete data.status;
      delete data.delFlag;
      if (this.searchObj.showArea != 3) {
        data.showArea = this.searchObj.showArea
        if (this.searchObj.goodsType != 0) {
          data.goodsType = this.searchObj.goodsType
        }

        if (this.searchObj.serverType != 0) {
          data.serverType = this.searchObj.serverType
        }
      }


      goodsserverTabList(data).then(res => {
        console.log(res);
        if (res.data) {
          this.list[0].name = this.list[0].value + `(${res.data.onTheShelf})`;
          this.list[1].name = this.list[1].value + `(${res.data.removed})`;
          // this.list[2].name = this.list[2].value + `(${res.data.deleted})`;
        } else {
          this.list[0].name = this.list[0].value + `(0)`;
          this.list[1].name = this.list[1].value + `(0)`;
					// this.list[2].name = this.list[2].value + `(0)`;
				}
			});
		},
		close() {
			console.log('1111111111');
		},
		open() {


		},
		// 选中某个单选框时，由radio时触发
		radioChange(value, type) {
			this.searchObj[type] = value;
		},
		goadd() {
      if (!this.checkStatus()) {
        return;
      }
      this.$navigateTo('../add/add', {});
    },
    goData(gsId) {
      if (!this.checkStatus()) {
        return;
      }
      this.$navigateTo('../dataStatistics/dataStatistics', {id: gsId});
    },
    godetail(gsId) {
      this.$navigateTo('./detail', {id: gsId});
    },
    goUpdate(gsId, type) {
      if (!this.checkStatus()) {
        return;
      }
      this.$navigateTo('../add/update', {id: gsId, type});
    },
    searchChange() {

      this.init();
    },
    search(value) {

      this.init();
    },
    updataStatus(gsId, type, status) {
      if (!this.checkStatus()) {
        return;
      }
      var data = {
        gsId
      };
      if (type == 1) {
        data.delFlag = status;
      } else {
        data.status = status;
      }
      goodsserverUpdateStatus(data).then(res => {
        if (res.code == 1) {
          this.$refs.uToast.show({
						title: '修改成功',
						type: 'success'
					});
					this.init();
				} else {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'error'
					});
				}
			});
		},
		checkStatus(){
			if (this.userInfo.serverSwitch != 1) {
				this.$refs.uToast.show({
					title: '暂无操作权限',
					type: 'error'
				});
				return false;
			}else{
				return true
			}
		},
		inquire() {
      // if (this.searchObj.showArea == 1) {
      // 	this.searchObj.serverType = '';
      // } else if (this.searchObj.showArea == 2) {
      // 	this.searchObj.goodsType = '';
      // } else if (this.searchObj.showArea == 3) {
      // 	this.searchObj.goodsType = '';
      // 	this.searchObj.serverType = '';
      // }

      this.shopList.forEach((val, index) => {
        val.list = []
        val.listQuery.pageNo = 1;
        val.listQuery.noData = true;

      })
      this.show = false;
      this.init();
    }
	}
};
</script>
<style lang="less">
.content {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
	background: #f5f5f5;
	box-sizing: border-box;
	swiper {
		flex: 1;
		swiper-item {
			height: 100%;
			scroll-view {
				padding-bottom: 150rpx;
				box-sizing: border-box;
			}
		}
	}
	/* 	.tab-wrapper {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	} */
	.item {
		padding: 20rpx;
		box-sizing: border-box;
		margin: 20rpx auto;
		width: 700rpx;
		background: #ffffff;
		border-radius: 5rpx;
		.title {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 20rpx;
		}
		.btn-wrapper {
			margin-top: 30rpx;
			border-top: 1px solid #ebebeb;
			padding: 20rpx 0;
			box-sizing: border-box;
			.btn {
				width: 168rpx;
				height: 60rpx;
				border: 1rpx solid #177fff;
				border-radius: 31rpx;
				font-size: 28rpx;
				font-weight: bold;
				text-align: center;
				color: #177fff;
				line-height: 60rpx;
			}
			.operation {
				font-size: 28rpx;
				font-weight: bold;
				text-align: center;
				color: #177fff;
				line-height: 60rpx;
				.line {
					width: 2rpx;
					height: 34rpx;
					background: #dfdfdf;
					margin: 0 20rpx;
				}
			}
		}
		.remark {
			font-size: 24rpx;
			font-weight: bold;
			text-align: left;
			color: #999999;
			image {
				width: 26rpx;
				height: 26rpx;
				margin-right: 10rpx;
				vertical-align: middle;
			}
		}
		.itemLits {
			margin: 9rpx 0;
			&.red {
				.label,
				.value {
					color: #ff6738;
				}
			}
			.f-c-fs {
				flex: 1;
			}
			.label {
				font-size: 26rpx;
				font-weight: 500;
				color: #999999;
				line-height: 35rpx;
			}
			.value {
				font-size: 26rpx;
				font-weight: 500;
				color: #333;
				line-height: 35rpx;
			}
		}
	}
	.creat {
		width: 750rpx;
		height: 98rpx;
		background: #177fff;
		font-size: 32rpx;
		font-weight: 700;
		text-align: center;
		color: #ffffff;
		line-height: 98rpx;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	.search {
		width: 100%;
		margin: 20rpx 0;
		.con {
			width: 567rpx;
			height: 72rpx;
			opacity: 1;
			background: #ffffff;
			border-radius: 8px;
			font-size: 24rpx;
			font-weight: 500;
			text-align: left;
			color: #cdcdcd;
			box-sizing: border-box;
		}
		.filtrate {
			width: 128rpx;
			height: 72rpx;
			background: #3992ff;
			border-radius: 8rpx;
			font-size: 28rpx;
			font-weight: 700;
			color: #ffffff;
			text-align: center;
			line-height: 72rpx;
			margin-left: 10rpx;
		}
	}
	.popupCon {
		width: 600rpx;
		padding: 60rpx 0 30rpx 30rpx;
		box-sizing: border-box;
		.title {
			font-weight: bold;
			margin: 30rpx 0;
		}
		.confrim-btn {
			margin-top: 100rpx;
		}
	}
}
</style>
